<template>
	<div class="my-chart-configurations-data" v-if="$store.chart.getTargetData">
		<el-form-item label="请求方式">
			<my-select
				v-model="$store.chart.getTargetData.orgConfig.request.requestDataType"
				:list="selectOptions"
				:fileType="{ label: 'label', value: 'value' }"
			/>
		</el-form-item>
		<!-- 静态 -->
		<template v-if="$store.chart.getTargetData.orgConfig.request.requestDataType == 0">
			<chart-data-matching-and-show :ajax="false" />
		</template>
		<!-- 动态 -->
		<chart-data-ajax v-if="$store.chart.getTargetData.orgConfig.request.requestDataType == 1" />
		<!-- 页面数据 -->
		<template v-if="$store.chart.getTargetData.orgConfig.request.requestDataType == 2">
			<el-form-item label="数据绑定">
				<my-input
					v-model="$store.chart.getTargetData.orgConfig.request.pageKey"
					placeholder="{{ 页面数据.xxx.yyy }}"
					type="textarea"
				/>
			</el-form-item>
			<chart-data-matching-and-show :ajax="false" />
		</template>
		<!-- 外部接口 -->
		<chart-data-ajax-out v-if="$store.chart.getTargetData.orgConfig.request.requestDataType == 3" />
	</div>
</template>

<script setup>
import ChartDataAjax from './components/ChartDataAjax/index.vue';
import ChartDataAjaxOut from './components/ChartDataAjaxOut/index.vue';

// 数据类型
const selectOptions = [
	{
		label: '静态数据',
		value: '0'
	},
	{
		label: '动态请求',
		value: '1'
	},
	{
		label: '页面数据',
		value: '2'
	},
	{
		label: '外部接口',
		value: '3'
	}
];
</script>
